<template>
    <div class="worksDetail">
        <mt-header title="作品详情页">
            <router-link slot="left">
                <mt-button @click="goBack()"></mt-button>
            </router-link>
            <mt-button slot="right">分享</mt-button>
        </mt-header>

        <div class="workDes p30 mb30">
            <div class="work_des_base">
                <p>
                    <a :href=" workInfo.projectLink ">{{ workInfo.projectName }}</a>
                    <span>P2P-金融</span>
                </p>
                <p>{{ workInfo.infoDesc }}</p>
            </div>
            
            <div class="work_des_con">
                <p>{{ workInfo.infoDesc }}</p>
            </div>
        </div>

        <div class="duty p30 mb30">
            <h3>职责</h3>
            <p>{{ workInfo.duty }}</p>
        </div>

        <div class="works_pic p30 mb30">
            <h3>作品图片</h3>
            <ul>
                <li>
                    <img src="../../assets/images/programmer1@2x.png" alt="">
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'worksDetail',
    data() {
        return {
            workInfo:{},
        }
    },
    created() {
        let id = this.$route.params.id;
        console.log(id);
        this.$Axios.get(`/api/user/projectDetail/${id}`).then((res)=>{
            this.workInfo = res.data.projectDetail;
        }).catch((error)=>{
            console.log(err,"获取作品详情信息失败");
        })
    },
    methods: {
        goBack(){
            this.$router.go(-1);
        },
    },
}
</script>
<style lang="scss" scoped>
$basecolor:#fff;
$color1:#8DC43D;
$color2:#FB9427;
$color3:#2B2B2B;
$color4:#555;
$color5:#999;
$bdashed:1px dashed #b9b9b9;
.mb30{margin-bottom: 30px;}
.p30{padding:30px;background:$basecolor;}

.worksDetail {
    font-size: 28px;
    .work_des_base{
        p{
            display: flex;
            padding-bottom: 30px;
            a{
                font-size: 32px;
                color: $color2;
                padding-left: 60px;
                background: url('../../assets/images/workLink@2x.png') 0 0 no-repeat;
                background-size: contain;
                flex: 1;
                span{
                    flex: 1;
                    font-size: 24px;
                    color: #999;
                    text-align: right;
                }
            } 
            &:nth-child(2){
                padding-bottom: 30px;
                margin-bottom: 30px;
                border-bottom: $bdashed;
            }
        }
        
    }
}
.works_pic{
    h3{
        padding-bottom: 30px;
    }
}
</style>
